<template>
	<view class="export-container">
		<view class="export-header">
			<view class="export-img">
				<image src="../../static/imgs/export-header.png" mode=""></image>
			</view>
			<view class="export-tab">
				<u-tabs :list="list1" @change="change" lineColor="#F4F6F8" :activeStyle='activeStyle'></u-tabs>
			</view>
		</view>
		<view class="export-box" v-show="state===0">
			<view class="export-box-item c-theme-btn-w" v-for="item in 5" @click="toLive">
				<image src="../../static/imgs/export1.png" style="width: 100%;height: 320rpx"></image>
				<view class="item-desc">
					<text>设计理念——用户增长思维和洞察数据
						做好产品体验设计</text>
				</view>
				<view class="export-footer">
					<view class="footer-left">
						<view class="export-course">
							<text>授课：XXXXX</text>
						</view>
						<image src="../../static/imgs/export-add.png" mode=""></image>
					</view>
					<view class="footer-right">
						<image src="../../static/imgs/collect.png" mode=""></image>
						<image src="../../static/imgs/share.png" mode=""
							style="margin-left: 10rpx; width: 27rpx;height: 30rpx;"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="export-recommend" v-show="state===1">
			<view class="img">
				<image src="../../static/imgs/export-recommend.png" mode="widthFix" style="width: 100%;"></image>
			</view>
			<CommonNav name="热门课程" style="margin: 40rpx 0;"></CommonNav>
			<view class="course-warp c-theme-btn-w">
				<view class="warp-item" v-for="item in courseData" :key="item.id">
					<view class="item-left" @click="toDetail(item.id)">
						<image src="../../static/imgs/home-time.png" mode="widthFix" style="width: 160rpx;"></image>
						<view class="coursr-info">
							<view class="name">{{item.title}}</view>
							<view class="price">
								<text
									style="color: #FFB300;font-size: 36rpx;font-weight: 800;margin-right: 10rpx;">￥{{item.price}}</text>
								<text style="text-decoration: line-through;color: #999FAD;font-size: 24rpx;">￥169</text>
							</view>
						</view>
					</view>
					<view class="item-right">
						<image @click="changeStatus(item.collected,item.id)" :src="item.collected?'../../static/imgs/collect.png':'../../static/imgs/details-collect.png'" mode="widthFix"
							style="width: 40rpx;margin-right: 40rpx;"></image>
						<image src="../../static/imgs/share.png" mode="widthFix" style="width: 30rpx;"></image>
					</view>
				</view>
			</view>
			<CommonNav name="免费课程" style="margin: 40rpx 0;"></CommonNav>
			<view class="free-course" style="margin-bottom: 100rpx;">
				<view class="course-item" @click="toLive">
					<CommonPlay></CommonPlay>
					<view class="item-name">
						和老师一起学设计
					</view>
					<view class="item-time">
						直播时间：10:00
					</view>
				</view>
				<view class="course-item" @click="toLive">
					<CommonPlay></CommonPlay>
					<view class="item-name">
						和老师一起学设计
					</view>
					<view class="item-time">
						直播时间：10:00
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import CommonNav from "@/components/CommonNav.vue"
	import CommonPlay from "@/components/CommonPlay.vue"
	import {course} from "@/api/index.js"
	import {courseCollet} from"@/api/course.js"
	import {TOAST} from"@/utils/utils.js"
	export default {
		components: {
			CommonNav,
			CommonPlay
		},
		data() {
			return {
				list1: [{
					name: '关注',
				}, {
					name: '推荐',
				}, ],
				state: 0,
				activeStyle: {
					color: "#3F7BED",
					fontSize: "36rpx",
					fontWeight: "bold"
				},
				courseData:[]
			};
		},
		methods: {
			change(val) {
				this.state = val.index
			},
			toLive(){
				uni.navigateTo({
					url:"/pages/index/live"
				})
			},
			getCourse(){
				course().then(res=>{
					this.courseData=res.data.records	
				})
			},
			toDetail(id){
				uni.navigateTo({
					url:"/pages/index/details?id="+id
				})
			},
			changeStatus(val,id){
				courseCollet({
					productId:id,
					status:val?0:1
				}).then(res=>{
					if(res.code===200){
						TOAST("操作成功")
					}
					this.getCourse()
				})
			}
		},
		onShow() {
			this.getCourse()
		}
	}
</script>

<style lang="scss" scoped>
	.export-container {
		padding: 40rpx 60rpx;
		overflow-y: auto;
		.export-header {
			display: flex;
			align-items: center;

			.export-img {
				image {
					width: 260rpx;
					height: 140rpx;
				}
			}
		}

		.export-box {
			padding-bottom: 40rpx;

			.export-box-item {
				padding: 40rpx;
				background-color: #F4F6F8;
				margin: 40rpx 0;

				.item-desc {
					font-size: 29rpx;
					color: #455372;
				}

				.export-footer {
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.footer-left {
						display: flex;
						align-items: center;

						image {
							width: 32rpx;
							height: 32rpx;
							margin-left: 20rpx;
						}

						.export-course {
							font-size: 29rpx;
							color: #999FAD;
						}
					}

					.footer-right {
						display: flex;
						align-items: center;

						image {
							width: 40rpx;
							height: 40rpx;
						}
					}
				}
			}
		}
	}

	.course-warp {

		border: 2rpx solid #FFFFFF;
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		box-shadow: -10rpx -10rpx 20rpx 2rpx rgba(255, 255, 255, 1), inset 10rpx 10rpx 10rpx 2rpx rgba(255, 255, 255, 0.4);
		background: #F4F6F8;

		.warp-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-right: 40rpx;

			.item-left {
				display: flex;
				align-items: center;

				.coursr-info {
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.name {
						color: #3D5464;
						font-weight: bold;
						font-size: 28rpx;
					}
				}
			}

			.item-right {
				margin-top: 40rpx;
			}
		}
	}

	.free-course {
		display: flex;
		justify-content: space-between;

		.course-item {
			padding: 32rpx 40rpx;
			border: 1px solid rgba(113, 129, 140, 0.10196078431372549);
			box-shadow: 6px 6px 20px 2px rgba(151, 173, 225, 0.6);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			background: #F4F6F8;

			.item-name {
				color: #3D5464;
				font-weight: bold;
				font-size: 28rpx;
			}
			.item-time {
				color: #3F7BED;
				font-weight: 400;
				font-size: 20rpx;
			}
		}
	}
</style>
